<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			#imgDargon{
				width: 3000px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
				top: 200px;
				left: 200px;
			}
			#imgDargon img{
				height: 120px;
				display: block;
				float: left;
			}
			#imgDargon #hide{
				width: 200px;
				height: 120px;
				position: absolute;
				left: 0;
				background-color: white;
			}
			.index{
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div id="imgDargon">
			<div id="index">
				<img src="./img/1.jpg" >
				<img src="./img/2.jpg" >
				<img src="./img/3.jpg" >
				<img src="./img/4.jpg" >
				<img src="./img/5.jpg" >
				<img src="./img/6.jpg" >
				<img src="./img/7.jpg" >
				<img src="./img/8.jpg" >
				<img src="./img/9.jpg" >
				<img src="./img/10.jpg" >
				<img src="./img/1.jpg" >
				<img src="./img/2.jpg" >
				<img src="./img/3.jpg" >
				<img src="./img/4.jpg" >
				<img src="./img/5.jpg" >
				<img src="./img/6.jpg" >
				<img src="./img/7.jpg" >
			</div>
				<div id="hide"></div>
		</div>
	</body>
	<script type="text/javascript">
		var interval;
		var arr = document.getElementsByTagName("img");
		window.onload = ()=>{
			$ = function(id){return (typeof(id) == 'object')?id:document.getElementById(id);};
			// 以下注释代码为动态添加子元素方法，可配合数组使用
			// var newBox = document.createElement("div");
			// newBox.id = "hide";
			// newBox.style.width = "200px";
			// newBox.style.height = "200px";
			// newBox.style.backgroundColor = "white";
			// newBox.style.position = "absolute";
			var sum = 0;
			for(var i = 0; i < arr.length; i++){
				sum += arr[i].width;
				if(i == 6) break;
			}
			$("hide").style.left = sum + "px";
			// newBox.style.left = sum + 'px';
			// $("imgDargon").appendChild(newBox);
			// $("index").style.width = sum + "px";
			// $("index").style.height = "120px";
			
			interval = setInterval(Direction,10);
		}
		
		var newSum = 0;
		for(var i = 0; i < arr.length; i++){
			newSum += arr[i].width;
			if(i == 9) break;
		}
		var left = 0;
		var num = 0;
		function Direction(){
			if(left == -newSum){
				left = 0;
			}
			check();
			left--;
			$("index").style.marginLeft = left + 'px';
			var a = $("index").style.width;
			console.log(index);
		}
		
		var test = 0;
		test += arr[num].width;
		function check(){
				console.log(test)
				if(left == -test){
					clearInterval(interval);
					num++;
					console.log(num)
					test += arr[num].width;
					if(num == 9){
						num = -1; 
						test= 0;
					}
					setTimeout(()=>{interval = setInterval(Direction,5)},1000);
				}
		}
		
		/*
			onmousemove 功能只需要用 flag判断是否为一个setInterval即可，不想写了，当前页面要继续加参数
			
				$("newIndex").onmouseenter = stopMove;
				$("newIndex").onmouseleave = continueMove;
				flag = true;
				function stopMove(){
					if(!flag){
						clearInterval(interval);
						flag = true;
					}
				}
				function continueMove(){
					if(flag){
						interval = setInterval(Direction,5);
						flag = false;
					}
				}
			
			注意 里面的 setInterval 也要判断
		*/
			
	</script>
</html>
